import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import MyTest from './components/MyTest';
import Child from './components/Child';

function App() {
  const h1Ref = useRef<HTMLHeadingElement>(null);
  // const myTestRef = useRef<any>(null);
  const [count, setCount] = useState(0);
  const [title, setTitle] = useState('送你个标题');
  const [list] = useState([1, 2, 3, 4, 5]);

  useEffect(() => {
    // console.log(h1Ref.current);
    h1Ref.current && (h1Ref.current.style.color = 'red');
  });

  // const changeTitle = () => {
  //   setTitle('标题:' + Math.random().toString(16).slice(2, 8));
  // };

  // 缓存方法 较少性能的浪费
  const changeTitle = useCallback(() => {
    console.log('改变标题...');
    setTitle('标题:' + Math.random().toString(16).slice(2, 8));
  }, []);

  // 属性缓存 减少浪费不必要的性能
  const filterList = useMemo(() => {
    return list.filter(item => item > 3);
  }, [list]);

  return (
    <div className="App">
      <h1 ref={h1Ref}>App title</h1>
      <p>count: {count}</p>
      <p>title: {title}</p>
      <button onClick={() => setCount(count => count + 1)}>change count</button>
      <br />
      <button onClick={changeTitle}>change title</button>
      {/* 类型“IntrinsicAttributes”上不存在属性“ref”。 */}
      {/* <MyTest ref={myTestRef}></MyTest> */}
      <MyTest></MyTest>
      <Child filterList={filterList} changeTitle={changeTitle}></Child>
      <br />
      <hr />
      { 0 && <span>显示1</span> }
      { '' && <span>显示2</span> }
      { false && <span>显示3</span> }
      { undefined && <span>显示4</span> }
      { null && <span>显示5</span> }
      { NaN && <span>显示6</span> }
      { [] && <span>显示7</span> }
      { {} && <span>显示8</span> }
    </div>
  );
}

export default App;
